<template>
  <div class="page-container">
    <page_breadcrumb :getKeyMethod="init_table_model" @change="change_table_model" pageOption />
    <ex_super_table_page v-bind="option" ref="SuperTablePage" @selection-change="e => selection = e">

    </ex_super_table_page>



  </div>
</template>

<script>
import superTablePageFunction from '@/mixin/super-table-page-function';
import page_table_model_manage from '@/mixin/page_table_model_manage';
import router_params from '@/mixin/router_params';

let emitKey = 'outbound>handover_shipping_record'
import emitOnFunction from '@/mixin/emit-on-function';

export default {
  title: "label_handover_shipping_record",
  mixins: [superTablePageFunction, router_params, emitOnFunction(emitKey), page_table_model_manage],
  components: {  },
  data() {
    return {
      isConfirm_routeParamsChange: false,
      selection: [],
      option: {
        search: {
          model: [
            { label: "label_outbound_code", key: "outOrderNo", },
            { label: "label_track_or_package_code", key: "trackNumber", },
            { label: "label_logistics_supplier", key: "supplierName", },
            { label: "label_package_collection_no", key: "boxNo", },
            {
              label: "label_customer", key: "customerId", type: "common_customer_choose"
            },
            { label: "label_sku", key: "skuId", type: "sku_selec_input" },
            {
              label: "label_create_time", key: 'gmtCreateForm', type: 'date-picker', attrs: { type: 'datetime' },
              render: (h, { data, item }) => {
                const limitKey = 'gmtCreateTo'; const value = data[item.key]; const limitValue = data[limitKey];
                return (<ex_super_input value={value} onInput={e => this.$set(data, item.key, e)} type="date-picker" placeholder="label_start_time"
                  attrs={{ type: 'datetime' }} pickerOptions={{ disabledDate: date => { return limitValue ? (limitValue < date.getTime()) : false } }}
                />)
              }
            },
            {
              label: "~", key: 'gmtCreateTo', type: 'date-picker', attrs: { type: 'datetime' },
              render: (h, { data, item }) => {
                const limitKey = 'gmtCreateForm'; const value = data[item.key]; const limitValue = data[limitKey];
                return (<ex_super_input value={value} onInput={e => this.$set(data, item.key, e)} type="date-picker" placeholder="label_end_time"
                  attrs={{ type: 'datetime', 'default-time': '23:59:59' }} pickerOptions={{ disabledDate: date => { return limitValue ? (limitValue > date.getTime()) : false } }}
                />)
              }
            },
          ],
        },
        // actionExtra: [
        //   {
        //     label: 'label_print_ozon_handover_order', attrs: { type: "primary" }, click: this.printOzon
        //   },
        // ],
        table: {
          url: "/wms-api/outbound/OutboundHandoverLogRpc/selectListPage.json",
          model: this.init_table_model(),
        },

      },


    };
  },



  methods: {

    option_table_model() {
      return [
        { type: 'selection', clickToggle: true, },
        {
          type: 'expandDesc', 'width': 100,
          expandDesc: {
            ...this.$defaultDescAttrs,
            model: [],
          },
        },
        { key: 'outOrderNo', label: 'label_outbound_code', 'min-width': 140, 'show-overflow-tooltip': true, },
        { key: "boxNo", label: "label_package_collection_no",'width': 150,  },
        { key: 'packageNo', label: 'label_track_or_package_code', 'min-width': 100, 'show-overflow-tooltip': true, },
        {
          key: 'supplierName', label: 'label_pms_supply', 'width': 100, 'show-overflow-tooltip': true,
          formatter: (r, c, v, i) => this.$formatNameCode(v, r.supplierCode)
        },
        {
          key: 'customerName', label: 'label_customer_name', 'width': 140, 'show-overflow-tooltip': true,
          formatter: (r, c, v, i) => this.$formatNameCode(v, r.customerCode)
        },
        { key: 'weight', label: 'label_weight', 'width': 100, 'show-overflow-tooltip': true, },
        // { key: 'containerType', label: 'label_container_type', 'min-width': 100, 'show-overflow-tooltip': true, },
        { key: 'volume', label: 'label_volume', 'width': 100, 'show-overflow-tooltip': true, },
        { key: 'skuCount', label: 'label_count', 'width': 100, 'show-overflow-tooltip': true, },
        { key: 'creator', label: 'label_operate_user', 'min-width': 100, 'show-overflow-tooltip': true, },
        { key: 'gmtCreate', label: 'label_create_time', 'width': 130, formatter: (r, c, v, i) => this.$dateFormat(v) },
      ]
    },

  }
};

</script>
<style></style>
